<template>
  <a-row class="task_box" v-if="visible">
    <!-- <a-col :span="24" class="header_col">
      <div class="task_list_left_top_name">
        <div class="icon_box">
          <i class="iconfont icon-yueyongdianliangbili"></i>
        </div>

        <div class="name">新建核算任务</div>
      </div>
      <div class="header_task_input_box"></div>
    </a-col> -->
    <a-col :span="24" style="padding: 8px 30px">
      <a-steps :current="current">
        <!--          :description="item.description" -->
        <a-step
          size="small"
          v-for="item in steps"
          :key="item.title"
          :title="item.title"
        />
      </a-steps>
    </a-col>

    <a-col :span="24">
      <div class="steps-content">
        <TaskBaseInfo ref="task" v-show="current == 0"></TaskBaseInfo>
        <AddFacilities
          v-show="current == 1"
          :facilitiesList="facilitiesList"
          ref="facilities"
        ></AddFacilities>
        <TaskPreview
          v-if="current == 2"
          :taskModel="taskModel"
          :facilities="facilities"
        ></TaskPreview>
      </div>
    </a-col>
    <a-col :span="24" style="padding: 20px 0">
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
        上一步
      </a-button>
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">
        下一步
      </a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="queryUserDepartListFun()"
      >
        生成任务
      </a-button>
    </a-col>
    <JUserSelectDepart
      ref="userSelectDepart"
      @success="userSelectDepartFun"
    ></JUserSelectDepart>
  </a-row>
</template>

<script>
// import { ListMixin } from "@/mixins/ListMixin";
import { mapActions, mapGetters, mapState } from "vuex";
import TaskBaseInfo from "./Task/TaskBaseInfo.vue";
import AddFacilities from "./Task/addFacilities.vue";
import TaskPreview from "./Task/taskPreview.vue";
import JUserSelectDepart from "@/components/Control/JUserSelectDepart.vue";
import {
  saveTaskBoundary,
  queryUserDepartList,
  queryFacilitiesBoundaryPageList,
} from "@/api/api";
export default {
  // props:['facilitiesList'],
  // mixins: [ListMixin],
  data() {
    return {
      taskModel: null,
      current: 0,
      facilitiesList: null,
      steps: [
        {
          title: "任务信息",
          content: "任务信息",
          description: "填写任务的基本信息",
        },
        {
          title: "添加核算项",
          content: "添加核算项",
          description: "选择设施绑定的核算项",
        },
        {
          title: "生成任务",
          content: "生成任务",
          description: "生成任务发布",
        },
      ],
      stepStyle: {
        marginBottom: "10px",
        boxShadow: "0px -1px 0 0 #e8e8e8 inset",
      },
      showPreview: false,
      queryParam: {
        standard: "1",
        period: "",
      },
      visible: true,
      facilities: [],
      facilitiesList: [],
    };
  },
  components: {
    AddFacilities,
    TaskBaseInfo,
    TaskPreview,
    JUserSelectDepart,
  },
  mounted() {},
  computed: {
    computeScopedOneLength(val) {
      var scopedOneArr = this.scopedOne;
      var len = 0;
      for (var i = 0; i < scopedOneArr.length; i++) {
        //   console.log(len, scopedOneArr[i].facilityList.length);
        len += scopedOneArr[i].facilityList.length;
      }
      return len;
    },
    computeScopedTwoLength(val) {
      var scopedTwoArr = this.scopedTwo;
      var len = 0;
      for (var i = 0; i < scopedTwoArr.length; i++) {
        //   console.log(len, scopedTwoArr[i].facilityList.length);
        len += scopedTwoArr[i].facilityList.length;
      }

      return len;
    },
  },
  methods: {
    ...mapGetters(["userInfo"]),
    userSelectDepartFun() {
      this.$refs.userSelectDepart.visible = false;
      this.saveTask(this.$refs.userSelectDepart.orgCode);
    },
    queryUserDepartListFun() {
      this.saveTask();
      // let userId = this.userInfo().id;
      // let param = { userId: userId };
      // queryUserDepartList(param).then((res) => {
      //   if (res.result.length > 1) {
      //     this.$refs.userSelectDepart.show(res.result);
      //   } else {
      //     this.saveTask(res.result[0].value);
      //   }
      // });
    },
    saveTask() {
      let idArr = this.$refs.facilities.mockData;
      let idsData = [];
      idArr.forEach((item) => {
        //   console.log(item)
        idsData.push({
          fbId: item.fbId,
          informantUserId: item.informantUserId,
          facilitiesId: item.facilitiesId,
          boundaryId: item.boundaryId,
          industryId: item.industryId,
        });
      });
      let param = {
        fbList: idsData,
        task: {
          ...this.taskModel,
        },
      };
      if (Array.isArray(param.task.fillingTime)) {
        param.task.fillingTime = param.task.fillingTime.join();
      }
      saveTaskBoundary(param).then((res) => {
        if (res.code == 200) {
          this.$message.success(`添加成功`);
          this.current = 0;
          this.$emit("TaskList");
        }
      });
    },
    next() {
      if (this.current == 0) {
        this.$refs.task.handleOk((valid) => {
          //   console.log(valid);
          if (valid) {
            this.taskModel = this.$refs.task.model;
            var param = {
              industryId: this.taskModel.industryId,
            };
            queryFacilitiesBoundaryPageList(param).then((res) => {
              var Data = res.result;
              Data.forEach((item, index) => {
                item.title = item.fbId;
                item.key = item.fbId;
              });
              this.facilitiesList = Data;
            });
            this.current++;
          }
        });
      } else if (this.current == 1) {
        this.facilities = this.$refs.facilities.mockData;
        if (this.facilities.length == 0) {
          this.$message.error("请添加核算项!");
          return;
        }
        this.current++;
      } else {
        this.current++;
      }
    },
    prev() {
      this.current--;
    },

    releaseTask() {
      this.$refs.releaseTask.visible = true;
    },
    close() {
      this.showPreview = false;
    },
    generatinAaccountingTaskFun() {
      this.showPreview = true;
    },
    addFacility() {
      this.$refs.addTaskModal.visible = true;
    },
    openFacilityFun(accountingIndx, facilityIdx) {
      this.accountingTaskData[accountingIndx].itemAccounting[
        facilityIdx
      ].isShow =
        !this.accountingTaskData[accountingIndx].itemAccounting[facilityIdx]
          .isShow;
    },
    deleteFacilityObj(scopeIdx, accountingIndx, facilityIdx) {
      this.accountingTaskData[scopeIdx].itemAccounting[
        accountingIndx
      ].facilityList.splice(facilityIdx, 1);
    },
  },
};
</script>

<style  lang="scss">
@import "@/assets/css/scrollbar.scss";
@import "@/assets/css/task.scss";
.task_box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  //   height: 100%;
  background: #fff;
  overflow-y: hidden;
  .header_col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 2px 2px 10px #ccc;
    margin-bottom: 8px;
    padding: 10px 10px;
    .task_list_left_top_name {
      display: flex;
      flex-direction: row;
      align-items: center;
      .icon_box {
        width: 40px;
        height: 40px;
        background: #4bc076;
        border-radius: 5px;
        i {
          color: #fff;
          font-size: 26px;
        }
      }

      .name {
        margin-left: 6px;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .header_task_input_box {
      display: flex;
      flex-direction: row;
    }
  }

  .ant-steps-item-container {
    text-align: left !important;
  }
}
</style>